<template>
  <div class="main">
    <div class="main_title">佣金配置</div>
    <!-- 已设置 -->
    <div>
      <div class="mian_info">抖音手续费：{{info.douyinFee}}%</div>
      <div class="mian_info">微信手续费：{{info.weixinFee}}%</div>
      <div class="mian_info">平台手续费：{{info.grouponFee}}%</div>
    </div>
    <div class="button_box">
      <el-button type="primary" size="small" @click="open">修改</el-button>
    </div>
    <el-dialog title="平台手续费" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="平台手续费：" prop="grouponFee">
          <el-input v-model="ruleForm.grouponFee" placeholder="请输入">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="微信费率：" prop="weixinFee">
          <el-input v-model="ruleForm.weixinFee" placeholder="请输入">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  // api
  import {
    getGrouponSetting,
    grouponSetting
  } from "@/api/merchants";
  export default {
    props: {
      id: String,
    },
    data() {
      return {
        loading: false,
        dialogVisible: false,
        ruleForm: {
          grouponFee: '',//平台手续费
          douyinFee: '',//抖音费率
          weixinFee: '',//微信费率
        },
        settingNone: true,
        info:{},
        rules:{
          grouponFee: [{
            required: true,
            message: '平台手续费',
            trigger: 'blur'
          }],
          weixinFee: [{
            required: true,
            message: "微信费率",
            trigger: "blur"
          }],
        },
      };
    },
    created() {
      this.getGrouponSetting();
    },
    methods: {
      getGrouponSetting() { //获取信息
        const params = {
          id: this.id,
        };
        getGrouponSetting(params).then((res) => {
            this.info = res.result
            this.ruleForm.grouponFee = res.result.grouponFee
            this.ruleForm.douyinFee = res.result.douyinFee
            this.ruleForm.weixinFee = res.result.weixinFee
            this.settingNone = false
            console.log(this.settingNone)
          })
          .finally(() => {
            // this.settingNone = true
            // console.log('none',this.settingNone)
          });
      },
      open() {
        this.ruleForm.grouponFee = this.info.grouponFee
        this.ruleForm.weixinFee = this.info.weixinFee
        this.dialogVisible = true
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            const params = {
              id: this.id,
              ...this.ruleForm
            };
            grouponSetting(params).then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
              });
              this.getGrouponSetting()
              this.dialogVisible = false
              this.loading = false
            })
            .finally(() => {
              this.loading = false
            });

          } else {
            console.log("error submit!!");
            return false;
          }
        });
        
      },
    },
  };

</script>
<style lang="scss" scoped>
  .main {
    border-radius: 8px;
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
  }

  .main_title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .mian_info {
    font-size: 16px;
    color: #333333;
    margin-bottom: 10px;
    margin-left: 20px;
  }

  .button_box {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }

</style>
